<template>
	<view>
		<view class="header">
			<view class="target">
				<image mode="widthFix" :src="`${imgsrc}/img/app/new_goods_banner.jpg`"></image>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-info" v-for="(item,index) in productList" :key="index" >
				<view class="left">
					<view class="title " :class="[index == 0?'active': '']">
						<view>
							{{item.number_period}}
						</view>
						<view class="processing" v-if="index == 0">进行中</view>


					</view>
				</view>
				<view class="right">
					<view class="content">
						<view class="img" @tap="toGoods(item)">
							<image mode="widthFix" :src="imgsrc + item.pic"></image>
						</view>
						<view class="info">
							<view class="name ellipsis">
								{{item.name}}
							</view>
							<view class="name hot">超爆网红款</view>
							<view class="price-number">
								<view class="text">
									<view class="text_title">上新价</view>
									<view class="new_text">
										<view class="price"><text>￥</text>{{item.price}}</view>
										<text class="slogan">￥{{item.original_price}}</text>
									</view>
								</view>
								<view class="snapUpNow" @tap="toGoods(item)">立即抢购</view>
							</view>
						</view>

					</view>
					<view class="comments">
						<view class="text">官方测评：
							<image src="/static/img/goods/doc_4.png" mode="" class="f01"></image>
							<image src="/static/img/goods/doc_4.png" mode="" class="f01"></image>
							<image src="/static/img/goods/doc_4.png" mode="" class="f01"></image>
							<image src="/static/img/goods/doc_4.png" mode="" class="f01"></image>
							<image src="/static/img/goods/doc_4.png" mode="" class="f01"></image>
						</view>
						<view class="text">{{item.off_evaluation}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				imgsrc: Api.imgsrc,
				productList: []
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// console.log(option.cid); //打印出上个页面传递的参数。
			// this.category_id = option.cid;
			uni.setNavigationBarTitle({
				title: '每周新品'
			});
			this.loadData();
			// this.reload();
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(() => {
				// this.reload();
				// uni.stopPullDownRefresh();
			}, 1000);
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showToast({
				title: '触发上拉加载'
			});
			this.pagenumber = this.pagenumber + 1;
			// this.reload()
		},
		methods: {
			async loadData() {
				var params = {};
				let data = await Api.apiCall('post', Api.goods.newProductList, params);
				if (data) {
					data.forEach(item => {
							item.select = 1;
						}
					)
					this.productList = data;
				}
			},
			async reload() {
				this.logining = true;
				var _this = this;
			},
			//商品跳转
			toGoods(e) {
				uni.navigateTo({
					url: '/mall/product/product?product_id='+ e.id
				});
			},
		}

	}
</script>

<style lang="scss">
	.icon {
		font-size: 26upx;
	}

	page {
		background-color: #fafafa;
	}

	.header {
		width: 100%;
		margin-bottom: 10upx;

		// display: flex;
		.target {
			width: 100%;
			z-index: 1;
			width: 100%;
			display: flex;
			justify-content: center;

			image {
				width: 100%;
			}
		}
	}

	.goods-list {
		width: 100%;

		.goods-info {
			width: 100%;
			height: 396upx;
			padding: 0 2%;
			margin-top: 20upx;
			display: flex;
			background-color: #fff;
			border-bottom: 2upx solid #EFF2F4;

			.left {
				width: 120upx;
				display: flex;
				padding: 30upx 0 146upx;

				.title {
					width: 120upx;
					height: 220upx;
					display: flex;
					border-radius: 20upx;
					background-color: #F2F6F2;
					color: #232323;
					justify-content: center;
					align-items: center;
					font-size: 32upx;
					font-weight: 600;
				}

				.active {
					display: flex;
					background-color: #FFBC21;
					flex-direction: column;

					.processing {
						font-size: 24upx;
						font-weight: 500;
					}
				}
			}

			.right {
				width: 100%;
				// margin:0 2%;
				padding: 30upx 0 20upx 20upx;

				.content {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.img {
						width: 220upx;
						height: 220upx;
						display: flex;
						justify-content: center;
						
						image {
							border-radius: 20upx;
							width: 100%;
						}
					}

					.info {
						width: 340upx;
						margin-left: 20upx;
						font-size: 30upx;

						.name {
							width: 100%;
							height: 50upx;
							// display: flex;
							font-size: 32upx;
							color: #232323;
							// align-items: flex-start;
						}

						.hot {
							font-size: 24upx;
							align-items: center;
						}

						.price-number {
							width: 100%;
							height: 90upx;
							// margin-top: 30upx;
							margin-top: 10upx;
							display: flex;
							// flex-direction: row;
							justify-content: space-between;

							.text {
								width: 30%;
								height: 78upx;
								flex-direction: column;

								// justify-content: flex-start;
								.text_title {
									height: 30upx;
									font-size: 24upx;
									color: #E62732;
								}

								.new_text {
									justify-content: space-between;
									width: 100%;
									height: 50upx;
									color: #E62732;
									font-size: 24upx;

									.price {
										color: #e65339;
										font-size: 36upx;
										font-weight: 600;
										display: inline-block;
										text{
											font-size: 18upx;
										}
									}
									.slogan {
										color: #807c87;
										// margin-left: 10upx;
										font-size: 24upx;
										text-decoration: line-through;
									}

								}
							}

							.snapUpNow {
								width: 180upx;
								height: 78upx;
								display: flex;
								border-radius: 39upx;
								background-color: #FFBC21;
								justify-content: center;
								align-items: center;
								color: #232323;
							}

						}
					}
				}

				.comments {
					width: 100%;
					// height: 98upx;
					margin-top: 26upx;
					font-size: 24upx;
					border-radius: 10upx;
					border: 2upx solid #EFF2F4;
					justify-content: center;
					align-items: center;

					.text {
						// line-height: 49upx;
						padding-left: 10px;
						align-items: center;
						color: #232323;

						.f01 {
							width: 23upx;
							height: 22upx;
							margin-left: 5upx;
						}
					}
				}
			}

		}

	}
</style>
